<template>
	<view class="app-components-background-image">
		<view class="app-components-background-image__background">
			<image :src="src" :mode="mode"  :style="[baseStyle]"></image>
		</view>
		<view class="app-components-background-image__body" :style="[bodyStyle]">
			<slot></slot>
		</view>
	</view>
</template>
<script lang="ts">
/**
 * 背景图片组件，弥补微信小程序无法设置本地图片为背景的问题
 * @property {String}						src					图片地址
 * @property {String}						mode				裁剪模式，见官网说明 （默认 'aspectFill' ）
 * @value aspectFit
 * @value aspectFill
 * @value widthFix
 * @value heightFix
 * @value top
 * @value bottom
 * @value right
 * @value left
 * @value center
 * @value topleft
 * @value top right
 * @value bottom left
 * @value bottom right
 * @property {String|Array<String>}			size				图片大小，只传一位代表宽高一致
 *
 */
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'background-image',
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
	options: {
		virtualHost: true
	}
	// #endif
});
</script>
<script lang="ts" setup>
import { computed } from 'vue';
import { isString } from '@/common/utils';

type modeTypes =
	| 'scaleToFill'
	| 'aspectFit'
	| 'aspectFill'
	| 'widthFix'
	| 'heightFix'
	| 'top'
	| 'bottom'
	| 'center'
	| 'left'
	| 'right'
	| 'top left'
	| 'top right'
	| 'bottom left'
	| 'bottom right';

const props = withDefaults(
	defineProps<{
		src: string;
		mode?: modeTypes;
		size?: [string] | [string, string];
		fixedSize?:boolean
	}>(),
	{
		mode: 'scaleToFill',
		size: () => ['320px', '240px']
	}
);

const baseStyle = computed(() => {
	let style: Record<string, string | number> = {};
	const size = isString(props.size) ? [props.size] : props.size;
	if (props.mode !== 'heightFix') {
		style.width = size[0];
	}

	if (props.mode !== 'widthFix') {
		style.height = size[1] || size[0];
	}
	return style;
});

const bodyStyle = computed(() => props.fixedSize&&!['heightFix','widthFix'].includes(props.mode) ? baseStyle.value:undefined)
</script>

<style lang="scss" scoped>
@include appBem_b(components-background-image) {
	position: relative;
	@include appBem_e(background){
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}
	@include appBem_e(body){
		position: relative;
		z-index: 2;
	}
}
</style>
